<template>
   <el-form ref="formRef" :model="form" label-width="80px">
       <el-form-item label="分类名称" prop="name">
        <el-input v-model="form.name" placeholder="请填写分类名称"/>
       </el-form-item>
        <!-- 二级分类 -->
       <el-form-item label="二级分类">
        <el-radio-group v-model="showMore">
          <el-radio :label="false" size="large">一级分类</el-radio>
          <el-radio :label="true"  size="large">二级分类</el-radio>
        </el-radio-group>
    </el-form-item>
       <!-- 分类选择 -->
       <el-form-item v-show="showMore" label="上级分类" prop="pid">
      <el-select v-model="form.pid" placeholder="请选择上级分类名称" >
        <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <!-- 分类图片 -->
    <el-form-item label="分类图片" v-show="showMore">
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        v-model:file-list="fileList"
        :action="uploadPictureURL()"
        :headers="{ jwt: token }"
        :data="{ type: 'category_picture' }"
        :limit="1"
        :on-exceed="handleExceed"
        :on-success="uploadSuccess"
      >
        <template #trigger>
          <el-button type="primary">请选择图片</el-button>
        </template>
        <template #tip>
          <div class="el-upload__tip">图片文件大小不超过500KB</div>
        </template>
      </el-upload>
    </el-form-item>
       <el-form-item>
        <el-button type="primary" v-if="form.id==0" @click="add(formRef)">新增</el-button>
        <el-button type="primary" v-else  @click="update(formRef)">修改</el-button>
        <el-button type="primary" @click="resetForm()">重置</el-button>
       </el-form-item>
   </el-form>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import { getCategoryList,getCategory,addCategory,editCategory,uploadPictureURL} from '../api/api';

//分类
const props = defineProps({
  id: {
    type: Number
  }
})
const emit=defineEmits(['success'])

const form = reactive({
  id: props.id,
  name: '',
  pid: '',
  picture: ''
})

const formRef=ref()
const categoryList = ref([])
const showMore = ref(false)

onMounted(async()=>{
    loadCategory()
})

//重置内容
const resetForm=()=>{
    formRef.value.resetFields();
    loadCategory();
}

//通过父来调用重置
const resetF=(id)=>{
    form.id=id;
    resetForm();
}
defineExpose({resetF})

//加载过程
const loadCategory=async()=>{
    if(form.id){
        const data=await getCategory({'id':form.id})
        Object.assign(form,data)
    }
    const list=await getCategoryList();
    categoryList.value=list.filter(item=>item.pid==0)
    showMore.value= form.pid!=0
}

//修改分类
const update=async formRef=>{
    const data =await editCategory(form);
    if(data){
        emit('success')
    }
    
    
}
//新增分类
const add=async ()=>{
    const data={
        name: form.name,
        pid: form.pid,
        picture: form.picture
    }
    const result=await addCategory(data)
    if(result){
        emit('success')
    }
        
}
// 文件超出个数限制时替换已有图片
const handleExceed = files => {
  uploadRef.value.clearFiles()
  uploadRef.value.handleStart(files[0])
  uploadRef.value.submit()
}

// 上传成功
const uploadSuccess = response => {
  const { errno, errmsg, data } = response
  if (errno !== 0) {
    notification({
      message: errmsg,
      type: 'error'
    })
  } else {
    if (errmsg !== '') {
      notification({
        message: errmsg,
        type: 'success'
      })
    }
    form.picture = data.savepath
  }
}

</script>
<style scoped>
.upload-demo {
  text-align: left;
  width: 91%;
}
</style>